<template>
	<div class="pledge-container">
		<!-- <h2 class="title">质押列表</h2> -->

		<!-- 质押项循环 -->
		<div v-for="(item, index) in pledgeList" :key="index" class="pledge-item">
			<!-- 图片置顶 -->
			<div class="image-header"></div>

			<!-- 内容区域 -->
			<div class="content">
				<div class="header">
					<div class="header-left">
						<view>最低质押1000.00 TX</view>
						<!-- view class="stock">库存余量：{{ item.stock }}台</view -->
					</div>
				</div>

				<div class="details">
					<div class="row">
						<text>中级投流礼包</text>
					</div>
					<div class="row">
						<text>单节点质押: 日产出 </text>
						<strong>{{ item.dailyYield }}%</strong>
					</div>
					<div class="row">
						<text>质押期限：</text>
						<span>{{ item.duration }}</span>
					</div>
					<button class="pledge-btn">立即质押</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pledgeList: [{
						name: '中级投流礼包',
						minAmount: 1000.00,
						stock: 493,
						dailyYield: 1.02,
						duration: '100天（线性释放）'
					},
					{
						name: '初级投流礼包',
						minAmount: 500.00,
						stock: 46,
						dailyYield: 1.00,
						duration: '100天（线性释放）'
					}
				]
			}
		}
	}
</script>

<style scoped>
	.pledge-container {
		max-width: 600px;
		margin: 20px auto;
		padding: 20rpx;
		font-family: Arial, sans-serif;
	}

	.title {
		color: #333;
		padding-bottom: 10px;
		border-bottom: 2px solid #eee;
	}

	.pledge-item {
		border: 1px solid #e4e4e4;
		border-radius: 8px;
		margin: 15px 0;
		overflow: hidden;
	}

	.image-header {
		height: 200px;
		background: #ddd;
		border-bottom: 1px solid #e4e4e4;
	}

	.content {
		padding: 10px;
	}

	.header {
		margin-bottom: 15px;
	}

	.header-left {
		display: flex;
		margin: 0 0 5px 0;

		:nth-child(1) {
			flex: 1;
			color: #2c3e50;
			font-size: 18px;
			color: red;
		}
	}

	.stock {
		text-align: right;
		flex: 1;
		color: #333;
		font-size: 15px;
		line-height: 28px;
	}

	.details {
		/* border-top: 1px solid #eee; */
		/* padding-top: 15px; */
		position: relative;
	}

	.row {
		justify-content: space-between;
		margin: 10px 0;
		color: #666;
	}

	.pledge-btn {
		position: absolute;
		top: 26px;
		right: 0;
		width: 100px;
		padding: 5px;
		font-size: 14px;
		background: #333;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 15px;
	}

	.pledge-btn:hover {
		background: #66b1ff;
	}
</style>